<template>
  <svg 
    :width="size" 
    :height="size" 
    viewBox="0 0 24 24" 
    :fill="filled ? currentColor : 'none'" 
    :stroke="filled ? 'none' : currentColor" 
    :stroke-width="filled ? 0 : 2"
    stroke-linecap="round" 
    stroke-linejoin="round"
    class="heart-icon"
  >
    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
  </svg>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  size: {
    type: [Number, String],
    default: 24
  },
  filled: {
    type: Boolean,
    default: false
  },
  color: {
    type: String,
    default: 'currentColor'
  }
})

const currentColor = computed(() => props.color)
</script>

<style scoped>
.heart-icon {
  transition: all 0.2s ease;
  cursor: pointer;
}

.heart-icon:hover {
  transform: scale(1.1);
}
</style> 